<!--
条件搜索查询
-->
<template>
    <div>
        <div class="tabs-nav">
            <span class="tabs-item">申请记录</span>
        </div>
<!--搜索form-->
        <el-form :model="ruleForm"  ref="ruleForm" label-width="140px" class="demo-ruleForm boderForm">
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item prop="email">
                        <div slot="label" style="line-height: 20px;">
                            <span class="labelName">申请单号 :</span>
                            <span class="labelName">Doc.# :</span>
                        </div>
                        <el-input v-model="ruleForm.applyNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="email" label="物资描述">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">物资描述 :</span><br/>
                            <span class="labelName">Item Description :</span>
                        </div>
                        <el-input  v-model="ruleForm.itemDescription"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="email" label="申请时间">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">申请时间 :</span>
                            <span class="labelName"> Date :</span>
                        </div>
                        <el-date-picker
                            @change="getDate"
                            v-model="ruleForm.time"
                            type="datetimerange"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="timeString">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="email" label="申请单状态">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">申请单状态 :</span>
                            <span class="labelName">Apply Status :</span>
                        </div>
                        <el-select v-model="ruleForm.status">
                            <el-option label="未提交" value="1"></el-option>
                            <el-option label="已提交" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="email" label="审批状态">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">审批状态 :</span>
                            <span class="labelName">Approval Status :</span>
                        </div>
                        <el-select v-model="ruleForm.reviewStatus">
                            <el-option label="审批中" value="1"></el-option>
                            <el-option label="审批通过" value="2"></el-option>
                            <el-option label="审批未通过" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="email" label="购买机构">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">购买机构 :</span>
                            <span class="labelName">Purchase Campus :</span>
                        </div>
                        <el-select v-model="ruleForm.organizationId" >
                            <el-option
                                v-for="(item, index) in organizationList"
                                :key="index"
                                :label="item.organizationName"
                                :value="item.organizationId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="email" label="购买部门">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">购买部门 :</span>
                            <span class="labelName">Purchase Dept :</span>
                        </div>
                        <el-select v-model="ruleForm.WorkGroupId">
                            <el-option
                                v-for="(item, index) in departmentList"
                                :key="index"
                                :label="item.description"
                                :value="item.flexValueId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="12" :offset="10">
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="reset">重置</el-button>

                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

    </div>
</template>
<script>

import CommonSlectList from "../../helpers/CommonSlect";
import bus, {TYPES} from '../../common/bus'

    export default {
        name: "application-form",
        data() {
            return {
                ruleForm: {
                    applyNo: '',
                    itemDescription: '',
                    startTime: '',
                    endTime: '',
                    status: '',
                    reviewStatus: '',
                    organizationId: '',
                    WorkGroupId: '',
                },
                temp_string:[ ]
            }
        },
        mixins: [CommonSlectList],
        mounted() {
            this.getOrganizationList();
            this.getDepartmentList();
        },
        methods: {

            /*转换日期*/
            getDate(val){
                if(!val) return;
                this.ruleForm.startTime = val[0];
                this.ruleForm.endTime = val[1];
            },
            // 搜索
            handleSearch() {
                bus.$emit(TYPES.recordFormData, this.ruleForm);
            },
            // 重置
            reset() {
                bus.$emit(TYPES.recordFormData);
                this.ruleForm = {
                    applyNo: '',
                    itemDescription: '',
                    startTime: '',
                    endTime: '',
                    status: '',
                    reviewStatus: '',
                    organizationId: '',
                    WorkGroupId: '',
                }

            }

        },
        computed:{
            timeString(){
                const date = new Date();
                this.temp_string =  [
                    `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
                    `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
                ];
                return this.temp_string;
            }

        }

    }

</script>

<style scoped>
    .labelName{
        float: right;
        width: 100%;
    }
    .boderForm{
        background: #ffffff;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 3px 6px 10px #e5e5e5;
    }
.tabs-nav{
    background:#f5f7fa;
    border: 1px solid #e4e7ed;
}
.tabs-item  {
    color: #409EFF;
    background-color: #fff;
    border-right-color: #dcdfe6;
    border-left-color: #dcdfe6;
    padding: 5px 20px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    border-bottom: 0px;
    font-size: 14px;

    }

</style>
